<!-- 任务中心 -->
<template>
  <div class="app-container">
    <TopMenu v-if="showTopMenu" :data-list="topDataLabel" @tabsChange="tabsChange"/>
    <div class="main-info-container">
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-form ref="listQuery" :inline="true" :model="listQuery" class="form-bottom-line" label-width="80px">
          <el-form-item v-if="showTopMenu" label="选择单位:">
            <el-select v-model="listQuery.corp_id" clearable filterable allow-create default-first-option autocomplete="off" placeholder="请选择单位名称" @change="companyChange">
              <el-option v-for="item in companyList" :key="item.corp_id" :label="item.name" :value="item.corp_id" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期:" prop="acceptance_date">
            <el-date-picker
              v-model="date"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              clearable
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="dateChange"/>
          </el-form-item>
          <el-form-item>
            <el-button v-permission="['v1/tasks/index']" type="primary" size="small" icon="el-icon-search" @click="handleFilter" >查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="data-list">
        <ul>
          <li v-for="(item, index) in listSelect" :key="index" @click="dataListFn(item.name)">
            <div class="item-left">
              <img :src="item.imgUrl">
            </div>
            <div v-if="item.name === '巡更' || item.name === '巡检'" class="item-right">
              <span class="name">{{ item.name }}</span>
              <span class="taskNum">未指派: {{ item.untreatedValue }}</span>
              <span class="taskNum">已完成: {{ item.processedValue }}</span>
            </div>
            <div v-else class="item-right">
              <span class="name">{{ item.name }}</span>
              <span class="taskNum">未处理: {{ item.untreatedValue }}</span>
              <span class="taskNum">已处理: {{ item.processedValue }}</span>
            </div>
          </li>
        </ul>
        <div class="btn-left"><i class="el-icon-arrow-left" @click="leftFn"/></div>
        <div class="btn-right"><i class="el-icon-arrow-right" @click="rightFn"/></div>
      </div>
      <ul class="menu-list">
        <li v-for="(item, key) in menuList" :class="{active: key === 0}" :key="key" @click="menuClick(item.key)">{{ item.name }}</li>
      </ul>
      <!-- 查询结果 -->
      <div class="task-list">
        <ul v-loading="listLoading" class="task-list-ul">
          <li v-for="item in tasksList" :key="item.index">
            <div v-if="item.task_name !== '巡检' && item.task_name !== '巡更'" class="task-title">
              <span class="task-name">{{ item.task_name }}</span>
            </div>
            <div v-else class="task-title">
              <span class="task-name">{{ item.task_name }}</span><span :title="item.plan_name" class="plan-name">{{ item.plan_name }}</span>
            </div>
            <img :src="item.imgUrl" class="statusImg" alt="">
            <ul v-if="item.task_name !== '巡检' && item.task_name !== '巡更'" class="task-content">
              <li><span class="task-content-label">时间：</span><span class="task-content-text">{{ item.task_start_at }}</span></li>
              <li><span class="task-content-label">建筑群：</span><span :title="item.park_name" class="task-content-label">{{ item.park_name }}</span></li>
              <li><span class="task-content-label">建筑：</span><span :title="item.building_name" class="task-content-label">{{ item.building_name }}</span></li>
              <li><span class="task-content-label">设备：</span><span :title="item.mname" class="task-content-label">{{ item.mname }}</span></li>
              <li><span class="task-content-label">点位：</span><span :title="item.loop" class="task-content-label">{{ item.loop }}</span></li>
            </ul>
            <ul v-else-if="item.task_name === '巡检'" class="task-content inspectPatrol">
              <li><span class="task-content-label">任务编号：</span><span class="task-content-text">{{ item.task_id }}</span></li>
              <li><span class="task-content-label">负责人：</span><span class="task-content-label">{{ item.leaderName }}</span></li>
              <li style="height: auto;line-height: 20px;"><span class="task-content-label">任务时间：</span><span class="task-content-label">{{ item.task_start_at }} -- {{ item.task_end_at }}</span></li>
              <li class="position"><span class="task-content-label">巡查分区：</span><span class="task-content-label">{{ item.zone_num }}</span></li>
              <li class="equipment"><span class="task-content-label">巡查设备：</span><span class="task-content-label">{{ item.device_num }}</span></li>
            </ul>
            <ul v-else class="task-content inspectPatrol">
              <li><span class="task-content-label">任务编号：</span><span class="task-content-text">{{ item.task_id }}</span></li>
              <li><span class="task-content-label">负责人：</span><span class="task-content-label">{{ item.leaderName }}</span></li>
              <li style="height: auto;line-height: 20px;"><span class="task-content-label">任务时间：</span><span class="task-content-label">{{ item.task_start_at }} -- {{ item.task_end_at }}</span></li>
              <li><span class="task-content-label">巡更点位数：</span><span class="task-content-label">{{ item.nightPatrolNum }}</span></li>
            </ul>
            <div v-if="item.task_name !== '巡检' && item.task_name !== '巡更'" class="btn-handle">
              <el-button v-permission="['v1/tasks/check']" v-if="item.status==='已处理'" type="primary" size="mini" @click="handleInfo(item)">查看</el-button>
              <el-button v-permission="['v1/tasks/handle']" v-else type="danger" size="mini" @click="handleAdd(item)">处理</el-button>
            </div>
            <div v-else class="btn-handle">
              <el-button v-permission="['v1/tasks/check']" v-if="item.status!=='未指派'" type="primary" size="mini" @click="handleInfo1(item)">查看</el-button>
              <el-button v-permission="['v1/tasks/assign']" v-if="item.status==='未指派'" type="danger" size="mini" @click="handleAdd(item)">指派</el-button>
              <el-button v-permission="['v1/tasks/close']" v-if="item.status==='进行中'" type="" size="mini" @click="closeTask(item)">关闭</el-button>
            </div>
          </li>
        </ul>
      </div>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      <formtask
        v-if="dialogVisible"
        :dialog-form="dialogForm"
        :dialog-type="dialogType"
        :dialog-visible.sync="dialogVisible"
        @getCancel="handleCancel"
        @closeBindWarnStandard="handleCloseBindWarnStandard"
        @submitForm="submitForm"/>
      <formtaskDetail
        v-if="dialogVisibleDetail"
        :dialog-form="dialogFormDetail"
        :dialog-visible.sync="dialogVisibleDetail"
        @getCancel="handleCancelDetail"
        @closeBindWarnStandard="handleCloseBindWarnStandardDetail"/>
      <formtaskDetail1
        v-if="dialogVisibleDetail1"
        :dialog-form="dialogFormDetail1"
        :dialog-visible.sync="dialogVisibleDetail1"
        @getCancel="handleCancelDetail1"
        @closeBindWarnStandard="handleCloseBindWarnStandardDetail1"/>
    </div>
  </div>
</template>
<script>
import { parseTime } from '@/utils/index'
import task1 from '@/assets/task/task1.png'
import taskActive1 from '@/assets/task/taskActive1.png'
import task2 from '@/assets/task/task2.png'
import taskActive2 from '@/assets/task/taskActive2.png'
import task3 from '@/assets/task/task3.png'
import taskActive3 from '@/assets/task/taskActive3.png'
import task4 from '@/assets/task/task4.png'
import taskActive4 from '@/assets/task/taskActive4.png'
import task5 from '@/assets/task/task5.png'
import taskActive5 from '@/assets/task/taskActive5.png'
import task6 from '@/assets/task/task6.png'
import taskActive6 from '@/assets/task/task6.png'
import task7 from '@/assets/task/task7.png'
import taskActive7 from '@/assets/task/task7.png'
import $ from 'jquery'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import formtask from './components/formtask.vue'
import formtaskDetail from './components/formtaskDetail.vue'
import formtaskDetail1 from './components/formtaskDetail1.vue'
import TopMenu from '@/components/TopMenu' // 顶部菜单
import checkPermission from '@/utils/permission' // 权限判断函数
import untreated from '@/assets/untreated.png'
import processed from '@/assets/processed.png'
import { getSocialUnit } from '@/api/company'
import { tasksList, tasksNumberList, tasksClose } from '@/api/taskCenter'
const statusTypeList = {
  1: '火警',
  2: '故障',
  3: '屏蔽',
  4: '巡检',
  5: '巡更',
  6: '隐患',
  7: '其他'
}
export default {
  name: 'Order',
  components: { Pagination, formtask, formtaskDetail, formtaskDetail1, TopMenu },
  data() {
    return {
      task1,
      task2,
      task3,
      task4,
      task5,
      task6,
      task7,
      taskActive1,
      taskActive2,
      taskActive3,
      taskActive4,
      taskActive5,
      taskActive6,
      taskActive7,
      processed,
      untreated,
      menuList: [],
      // 火警 故障
      menuList1: [{
        name: '未处理',
        key: '7'
      }, {
        name: '已处理',
        key: '8'
      }],
      // 隐患
      menuList2: [{
        name: '未处理',
        key: '1'
      }, {
        name: '已处理',
        key: '3'
      }],
      // 巡更 巡检
      menuList3: [{
        name: '未指派',
        key: '1'
      }, {
        name: '进行中',
        key: '2'
      }, {
        name: '完成',
        key: '3'
      }, {
        name: '关闭',
        key: '4'
      }, {
        name: '逾期',
        key: '5'
      }, {
        name: '遗漏',
        key: '6'
      }],
      listSelect: [{
        name: '火警',
        processedValue: '0',
        untreatedValue: '0',
        imgUrl: taskActive1
      }, {
        name: '故障',
        processedValue: '0',
        untreatedValue: '0',
        imgUrl: task2
      }, {
        name: '屏蔽',
        processedValue: '0',
        untreatedValue: '0',
        imgUrl: task3
      }, {
        name: '巡检',
        processedValue: '0',
        untreatedValue: '0',
        imgUrl: task4
      }, {
        name: '巡更',
        processedValue: '0',
        untreatedValue: '0',
        imgUrl: task5
      }, {
        name: '隐患',
        processedValue: '0',
        untreatedValue: '0',
        imgUrl: task6
      }, {
        name: '其他',
        processedValue: '0',
        untreatedValue: '0',
        imgUrl: task7
      }],
      topDataLabel: {
        data: []
      },
      showTopMenu: false,
      // 处理查看弹窗信息
      dialogForm: {},
      dialogFormDetail: {},
      dialogFormDetail1: {},
      dialogType: '添加',
      dialogVisible: false,
      dialogVisibleDetail: false,
      dialogVisibleDetail1: false,
      // 表格信息
      list: [],
      total: 0,
      listLoading: false,
      date: [],
      listQuery: {
        page: 1,
        offset: 8,
        corp_id: '',
        status: '7',
        task_type: 1,
        start_at: '',
        end_at: ''
      },
      left: 40,
      leftNum: 0,
      companyList: [],
      tasksList: []
    }
  },
  created() {
    this.getCompanyList()
    this.getNumberList()
    const that = this
    this.$nextTick(function() {
      this.getDate()
      this.menuList = this.menuList1
      $('.data-list>ul').css({
        width: this.listSelect.length * 293 + 'px'
      })
      const dataLength = $('.data-list').width()
      const dataUlLength = $('.data-list>ul').width()
      if (dataLength > dataUlLength) {
        $('.el-icon-arrow-left').css({
          color: '#B8AEAE'
        })
        $('.el-icon-arrow-right').css({
          color: '#B8AEAE'
        })
      } else {
        $('.el-icon-arrow-left').css({
          color: '#B8AEAE'
        })
        $('.el-icon-arrow-right').css({
          color: '#409EFF'
        })
      }
      $('.data-list>ul>li').eq(0).addClass('active')
      $('.data-list>ul>li').click(function() {
        const index = $(this).index()
        $(this).addClass('active')
        $(this).siblings().removeClass('active')
        that.setTimeoutFn()
        for (var i = 0; i < that.listSelect.length; i++) {
          if (index === i) {
            that.listSelect[i].imgUrl = that['taskActive' + (index + 1)]
          } else {
            that.listSelect[i].imgUrl = that['task' + (i + 1)]
          }
        }
      })
      $(document).on('click', '.menu-list li', function() {
        $(this).addClass('active')
        $(this).siblings().removeClass('active')
      })
    })
  },
  methods: {
    // 列表查询
    checkPermission,
    getList() {
      const that = this
      this.listLoading = true
      tasksList(this.listQuery)
        .then(response => {
          if (response.data.code === 40000) {
            this.tasksList = []
            if (response.data.data.data) {
              response.data.data.data.forEach(item => {
                item.task_start_at = item.task_start_at ? parseTime(item.task_start_at * 1000, '{y}-{m}-{d} {h}:{i}:{s}') : ''
                item.task_end_at = item.task_end_at ? parseTime(item.task_end_at * 1000, '{y}-{m}-{d} {h}:{i}:{s}') : ''
                item.task_name = statusTypeList[item.task_type]
                item.status = item.status + ''
                that.menuList.forEach(it => {
                  if (it.key === item.status) {
                    item.status = it.name
                  }
                })
                item.loop = item.loop ? item.loop : ''
                item.plan_name = item.plan_name ? item.plan_name : ''
                item.leaderName = item.leader && JSON.parse(item.leader) ? JSON.parse(item.leader).nickname : ''
                item.workerName = item.worker && JSON.parse(item.worker) ? JSON.parse(item.worker).nickname : ''
                item.nightPatrolNum = item.points && JSON.parse(item.points) ? JSON.parse(item.points).length : 0
                // console.log(item)
                that.tasksList.push(item)
              })
              this.total = parseInt(response.data.data.total_count)
            }
            this.listLoading = false
          }
        })
        .catch((e) => {
          console.log(e)
          this.tasksList = []
          this.total = 0
          this.listLoading = false
        })
    },
    // 列表查询
    getNumberList() {
      this.listLoading = true
      tasksNumberList()
        .then(response => {
          if (response.data.code === 40000) {
            for (var item in response.data.data) {
              // console.log(item)
              // 火警
              if (item === 'fire') {
                this.listSelect[0].processedValue = response.data.data[item].handled
                this.listSelect[0].untreatedValue = response.data.data[item].untreated
              }
              // 故障
              if (item === 'fault') {
                this.listSelect[1].processedValue = response.data.data[item].handled
                this.listSelect[1].untreatedValue = response.data.data[item].untreated
              }
              // 屏蔽
              if (item === 'shield') {
                this.listSelect[2].processedValue = response.data.data[item].handled
                this.listSelect[2].untreatedValue = response.data.data[item].untreated
              }
              // 巡检
              if (item === 'inspection') {
                this.listSelect[3].processedValue = response.data.data[item].completed
                this.listSelect[3].untreatedValue = response.data.data[item].unassigned
              }
              // 巡更
              if (item === 'patrol') {
                this.listSelect[4].processedValue = response.data.data[item].completed
                this.listSelect[4].untreatedValue = response.data.data[item].unassigned
              }
            }
            this.getList()
          }
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    // 列表上面的状态菜单点击事件
    menuClick(key) {
      this.listQuery.status = key
      this.getList()
    },
    // 查询条件日期选择
    dateChange(val) {
      if (val) {
        this.listQuery.start_at = val[0]
        this.listQuery.end_at = val[1]
      } else {
        this.listQuery.start_at = ''
        this.listQuery.end_at = ''
      }
    },
    // 类型点击事件
    dataListFn(name) {
      if (name === '火警' || name === '故障' || name === '屏蔽') {
        this.menuList = this.menuList1
      } else if (name === '隐患') {
        this.menuList = this.menuList2
      } else if (name === '巡更' || name === '巡检') {
        this.menuList = this.menuList3
      }
      var type = name === '火警' ? 1 : name === '故障' ? 2 : name === '屏蔽' ? 3 : name === '巡检' ? 4 : name === '巡更' ? 5 : name === '隐患' ? 6 : 7
      this.listQuery.task_type = parseInt(type)
      this.listQuery.status = parseInt(this.menuList[0].key)
      $('.menu-list li').eq(0).addClass('active').siblings().removeClass('active')
      this.getList()
    },
    getDate() {
      var date = new Date()
      var year = date.getFullYear()
      var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.listQuery.start_at = year + '-' + month + '-01'
      this.listQuery.end_at = year + '-' + month + '-' + day
      this.date = [this.listQuery.start_at, this.listQuery.end_at]
    },
    // 点击右侧按钮
    rightFn() {
      const dataLength = $('.data-list').width()
      const dataUlLength = $('.data-list>ul').width()
      const max = ((this.listSelect.length - 3) * 292 - 40) * -1
      if (dataLength > dataUlLength) {
        $('.el-icon-arrow-left').css({
          color: '#B8AEAE'
        })
        $('.el-icon-arrow-right').css({
          color: '#B8AEAE'
        })
      } else if (this.left <= 40 && this.left > max) {
        this.leftNum--
        this.left = 292 * this.leftNum + 40
        $('.data-list ul').animate({ left: this.left }, 800)
      }
      if (this.leftNum !== 0) {
        $('.el-icon-arrow-left').css({
          color: '#409EFF'
        })
      }
      if ((292 * this.leftNum - 292 + 40) < max) {
        $('.el-icon-arrow-left').css({
          color: '#409EFF'
        })
        $('.el-icon-arrow-right').css({
          color: '#B8AEAE'
        })
      }
    },
    // 点击左侧按钮
    leftFn() {
      const dataLength = $('.data-list').width()
      const dataUlLength = $('.data-list>ul').width()
      const max = ((this.listSelect.length - 3) * 292 - 40) * -1
      if (dataLength > dataUlLength) {
        $('.el-icon-arrow-left').css({
          color: '#B8AEAE'
        })
        $('.el-icon-arrow-right').css({
          color: '#B8AEAE'
        })
      } else if (this.left >= max && this.left < 40) {
        this.leftNum++
        this.left = 292 * this.leftNum + 40
        $('.data-list ul').animate({ left: this.left }, 800)
      }
      if (this.leftNum === 0) {
        $('.el-icon-arrow-left').css({
          color: '#B8AEAE'
        })
      }
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 启用
    iconQiyong(index, data) {
      this.dataList.items[index].status = false
      this.setTimeoutFn()
    },
    // 停用
    iconTingzhi(index, data) {
      this.dataList.items[index].status = true
      this.setTimeoutFn()
    },
    // 处理
    handleAdd(data) {
      // console.log(JSON.stringify(data))
      this.dialogForm = data
      this.dialogVisible = true
    },
    // 关闭
    closeTask(data) {
      const that = this
      this.$confirm('此操作将关闭该任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        const params = {
          task_id: data.task_id,
          type: data.task_type
        }
        tasksClose(params)
          .then((res) => {
            const data = res.data
            if (data.code === 40000) {
              that.$message.success(data.message)
            } else {
              that.$message.warning(data.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
        this.getNumberList()
      })
    },
    // 新增弹窗确认
    submitForm(formName) {
      this.getNumberList()
      this.dialogVisible = false
    },
    handleCancel() {
      this.dialogVisible = false
    },
    // 关闭弹窗
    handleCloseBindWarnStandard() {
      this.dialogVisible = false
    },
    handleCancelDetail() {
      this.dialogVisibleDetail = false
    },
    // 关闭弹窗
    handleCloseBindWarnStandardDetail() {
      this.dialogVisibleDetail = false
    },
    handleCancelDetail1() {
      this.dialogVisibleDetail1 = false
    },
    // 关闭弹窗
    handleCloseBindWarnStandardDetail1() {
      this.dialogVisibleDetail1 = false
    },
    // 查看详情
    handleInfo(data) {
      this.dialogFormDetail = data
      this.dialogVisibleDetail = true
    },
    // 查看详情
    handleInfo1(data) {
      this.dialogFormDetail1 = data
      this.dialogVisibleDetail1 = true
    },
    // 顶部切换监听
    tabsChange(value) {
      const that = this
      this.companyList.forEach(function(data, index, array) {
        if (value === array[index].name) {
          that.listQuery.corp_id = array[index].corp_id
        }
      })
      this.getList()
    },
    setTimeoutFn() {
      const that = this
      this.listLoading = true
      setTimeout(function() {
        that.listLoading = false
      }, 1000)
    },
    // 单位下拉框
    companyChange(value) {
      var select = {}
      this.companyList.forEach(function(data, index, array) {
        if (value === array[index].corp_id) {
          select = array[index]
        }
      })
      if (this.topDataLabel.data.indexOf(select.name) === -1) {
        this.topDataLabel.data.push(select.name)
      }
    },
    // 单位下拉框查询
    getCompanyList() {
      const that = this
      getSocialUnit()
        .then(response => {
          if (response.data.code === 40000) {
            that.companyList = []
            that.companyList = response.data.data
            that.showTopMenu = true
          } else if (response.data.code === 40003 && response.data.message === '权限验证失败!') {
            that.showTopMenu = false
          } else {
            that.$message.warning(response.data.message)
          }
        })
        .catch(() => {
          that.companyList = []
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.task-list{
  min-height: 270px;
  ul{
    padding:10px 0;
    margin: 0;
    overflow: hidden;
  }
  .task-list-ul>li{
    width: 23%;
    height: auto;
    float: left;
    margin: 0 1% 15px 1%;
    position: relative;
    list-style: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 6px;
    box-shadow:0px 1px 5px 1px rgba(0,0,0,0.24);
    .task-title{
      width: 100%;
      height: 36px;
      line-height: 36px;
      position: relative;
      border-bottom: 1px solid #D1D0D0;
      span{
        display: block;
        float: left;
      }
      .task-name{
        width: 70px;
        background-color: #E8441C;
        color: #FFFFFF;
        border-radius: 6px 0 0 0;
        padding: 0 10px;
        font-size: 14px;
        text-align: center;
        position: absolute;
        left: 0;
      }
      .plan-name{
        color: #333;
        padding: 0 10px;
        font-size: 14px;
        text-align: left;
        width: 100%;
        padding-left: 75px;
        overflow: hidden;
        box-sizing: border-box;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .task-place{
        padding: 0 9px;
        font-size: 14px;
      }
      .el-switch{
        float: right;
        margin-top: 8px;
      }
      i{
        float: right;
        color: #36B4F7;
        font-size: 20px;
        margin: 9px 2px 0 2px;
        cursor: pointer;
      }
    }
    .task-content{
      width: 100%;
      height: 150px;
      padding:15px 20px;
      z-index: 20;
      li{
        list-style: none;
        height: 24px;
        line-height: 24px;
        font-size: 13px;
        overflow: hidden;
      }
      .task-content-label{
        color: #858282;
      }
      .task-content-text{
        color: #292828;
      }
    }
    .inspectPatrol{
      li{
        height: 30px;
        line-height: 30px;
      }
      .position{
        width: 50%;
        float: left;
      }
      .equipment{
        width: 50%;
        float: left;
      }
    }
    .btn-handle{
      padding: 10px 20px;
    }
    .statusImg{
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 10;
    }
  }
  &::after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
  }
}
.el-dialog{
  padding: 0!important;
}
.data-list{
  position: relative;
  padding: 0 20px;
  height: 106px;
  overflow: hidden;
  margin-bottom: 20px;
  margin-top: 10px;
  > div{
    width: 40px;
    height: 106px;
    line-height: 106px;
    position: absolute;
    top: 0px;
    color: #B4AEAE;
    font-size: 26px;
    background: #FFFFFF;
    i{
      cursor: pointer;
    }
  }
  .btn-left{
    left: 0;
  }
  .btn-right{
    right: 0;
  }
  > ul{
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 1350px;
    height: 106px;
    position: absolute;
    left: 40px;
    top: 0;
    > li{
      width: 282px;
      height: 106px;
      float: left;
      font-size: 14px;
      border: 1px solid #AAAAAA;
      border-radius: 5px;
      box-sizing: border-box;
      margin-right: 10px;
      cursor: pointer;
      .item-left{
        width: 120px;
        float: left;
        height: 106px;
        text-align: center;
        margin-right: 10px;
        span{
          display: block;
          width: 120px;
          height: 22px;
          line-height: 22px;
        }
        img{
          width: 42px;
          margin-top: 24px;
          display: inline-block;
        }
      }
      .item-right{
        width: 76px;
        height: 106px;
        float: left;
        .name{
          width: 100%;
          height: 40px;
          line-height: 40px;
          display: block;
          font-size: 16px;
          font-weight: 600;
          color: #AAAAAA;
        }
        .taskNum{
          width: 100%;
          height: 33px;
          line-height: 33px;
          display: block;
          font-size: 14px;
          font-weight: 600;
          color: #AAAAAA;
        }
      }
    }
    > li.active{
      border-color: #4BCBFD;
      .svg-icon{
        color: #F32F32;
      }
      .name{
        color: #4BCBFD;
      }
      .taskNum{
        color: #4BCBFD;
      }
    }
    > li:last-child{
      margin-right: 0px;
    }
  }
}
.menu-list{
  line-height: 50px;
  margin-bottom: 10px;
  overflow: hidden;
  li{
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    text-align: center;
    font-size: 14px;
    color: #AAAAAA;
    border: 1px solid #AAAAAA;
    border-radius: 5px;
    margin-left: 10px;
    cursor: pointer;
    float: left;
  }
  li.active{
    color: #fff;
    background: #2897FF;
    border: 1px solid #2897FF;
  }
}
</style>
